<template>
    <div style="width: 491px">
        <div class="flex calendar-title">
            <a @click="setMonthNum(false)" class="el-icon-arrow-left"></a>
            <div @click="getMonthDay">{{ setYear }}年{{ setMonth }}月</div>
            <a @click="setMonthNum(true)" class="el-icon-arrow-right"></a>
        </div>
        <ul class="weekdays">
            <li v-for="item in weekDay">{{ item }}</li>
        </ul>
        <ul class="days">
            <li v-for="(item,index) in info"
                :style="index%7===0?border:''"
                @click="handleSetTime(item)"
                style="cursor: pointer"
                :class="item.day===today?'active':'no-active'">
                <div class="flex">
                    <span>{{ item.days}} </span>
                    <div v-show="showZero||item.noJobNum" class="noJobNum">{{ item.noJobNum }}</div>
                </div>
                <div v-show="showZero||item.jobNum" class="info-bg">{{ item.jobNum }}</div>
            </li>
            <div class="clear"></div>
        </ul>

    </div>
</template>
<script>
    function mGetDate(year, month) {
        var d = new Date(year, month, 0);
        return d.getDate();
    }

    import { getLocalTime } from "@/utils/dateFormat";

    export default {
        name: 'calendar',
        props: {
            getData: {
                type: Function,
                require: true
            },
            showZero: {
                type: Boolean,
                default: false,
            },
            portCode:{
                default: ''
            },
            portCodes:{
                default: []
            }
            // setYear:{
            //     type:Number,
            //     default:new Date().getFullYear()
            // },
            // setMonth:{
            //     type:Number,
            //     default:new Date().getMonth() + 1
            // },
        },
        data() {
            return {
                nowTime: Date.parse(new Date()),
                now: new Date().toLocaleString().split(' ')[0].replace(/\//g, '-'),
                weekDay: ['日', '一', '二', '三', '四', '五', '六',],
                setMonth: new Date().getMonth() + 1,
                setYear: new Date().getFullYear(),
                setDay: new Date().getDate(),
                today: getLocalTime(new Date(), 'YYYY-MM-DD'),
                setWeek: 0,
                info: [],
                calendarDay: [],
                dateType: 'day',
                border: 'border-left:1px solid #ffffff',
                search: '',
                keyWord: '',
                isFirst: true,
            }
        },
        mounted() {
            // this.getMonthDay()
        },
        activated() {
            this.isFirst = true
        },
        methods: {
            getMonthDay() {
                let toMonth = mGetDate(this.setYear, this.setMonth)
                let date = new Date(this.setYear, this.setMonth - 1, this.setDay)
                let today = new Date(this.setYear, this.setMonth - 1, '1')
                this.setWeek = today.getDay()
                this.info = []
                for (let i = 0; i < toMonth; i++) {
                    this.info.push({
                        day: getLocalTime(this.setYear + '/' + this.setMonth + '/' + (i + 1), 'YYYY-MM-DD'),
                        days: i + 1,
                        jobNum: '',
                        noJobNum: '',
                        totalJobNum: '',
                    })
                }
                for (let i = 0; i < this.setWeek; i++) {
                    this.info.unshift({
                        day: '',
                        days: '',
                        jobNum: '',
                        noJobNum: '',
                        totalJobNum: '',
                    })
                }
                this.handleCurrent({ date: getLocalTime(date, 'YYYY-MM-DD') }, true)
                let portCodeSearch = ''
                if (this.portCodes && this.portCodes.length > 0){
                    portCodeSearch = this.arrayToString(this.portCodes)
                } else {
                    portCodeSearch = this.portCode
                }
                let params = {
                    search_EQ_dateType: this.dateType,
                    search_GTE_dateTime: getLocalTime(date, 'YYYY-MM-DD'),
                    search_IN_portCode: portCodeSearch
                }
                if (this.search) {
                    params[this.search] = this.keyWord
                }
                this.getData(this.$assist.copySearchConditions(params)).then(res => {
                    this.calendarDay = res.data.aaData
                    this.info.map((m, i) => {
                        this.calendarDay.map((f, index) => {
                            if (m.day === f.date) {
                                this.info[i].jobNum = f.jobNum
                                this.info[i].noJobNum = f.noJobNum
                                this.info[i].totalJobNum = f.totalJobNum
                            }
                        })
                    })
                    if (this.isFirst) {
                        this.$emit('set-day', { date: this.today })
                        this.isFirst = false
                    } else {
                        if (this.setMonth == new Date().getMonth() + 1) {
                            this.today = getLocalTime(date, 'YYYY-MM-DD')
                        } else {
                            this.today = getLocalTime(date, 'YYYY-MM-DD').substr(0, 8) + '01'
                        }
                        this.$emit('set-day', { date: this.today })
                    }
                })
            },
            arrayToString:function(arr){
                let value = ""
                if (arr != null && arr != "" && arr.length > 0){
                    arr.forEach((column, index) => {
                        value = value + "," + column
                    })
                    value = value.substring(1)
                }
                return value
            },
            setMonthNum(bool) {
                if (bool) {
                    if (this.setMonth < 12) {
                        this.setMonth = this.setMonth + 1
                    } else {
                        this.setYear = this.setYear + 1
                        this.setMonth = 1
                    }
                } else {
                    if (this.setMonth > 1) {
                        this.setMonth = this.setMonth - 1
                    } else {
                        this.setYear = this.setYear - 1
                        this.setMonth = 12
                    }
                }
                this.getMonthDay()
            },
            handleCurrent(item, bool) {
                if (bool) {
                    this.$emit('worked', item)
                } else {
                    this.$emit('work', item)
                }
            },
            handleSetTime(item) {
                console.log(item)
                if (item.day) {
                    this.today = item.day
                    this.$emit('set-day', { date: item.day })
                    this.$emit('get-day', item)
                }
            }
        },
        computed: {},
        filters: {
            day(val) {
                if (val !== '') {
                    return val + '日'
                }
            }
        }
    }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .calendar-title {
        height: 45px;
        padding: 0 20px;
        background-color: #c4d7e8;
        border-left: 1.5px solid #fff;
        border-right: 1px solid #fff;
    }

    .calendar-title a {
        color: #ffffff;
        font-size: 22px;
    }
    .flexCenter {
        display: flex;
        align-items: center;
    }

    * {
        box-sizing: border-box;
    }

    ul {
        list-style-type: none;
    }

    body {
        font-family: Verdana, sans-serif;
    }

    .month ul {
        margin: 0;
        padding: 0;
    }

    .month ul li {
        color: white;
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 3px;
    }

    .weekdays {
        margin: 0;
        /*border-top: 1px solid #ffffff;*/
        border-left: 1px solid #ffffff;
    }

    .weekdays li {
        display: inline-block;
        width: 70px;
        color: #666;
        text-align: center;
        border-right: 2px solid #ffffff;
        height: 50px;
        background: #E7F2F7;
        line-height: 50px;
        border-bottom:2px solid #ffffff ;
    }

    .days {
        margin: 0;
        /*border-top: 1px solid #ffffff;*/
        border-left: 1px solid #ffffff;
    }

    .days li {
        list-style-type: none;
        display: inline-block;
        width: 70px;
        text-align: center;
        font-size: 12px;
        color: #777;
        float: left;
        border-right: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        background: #f5f4f4;
        height: 50px;
        padding: 2px 2px 2px 8px;
    }

    .days li {
        padding: 2px 2px 2px 8px;
    }

    .no-active {
        background: #f9f9f9;
        color: #349bfe;
        height: 50px;
        position: relative;
    }

    .no-active .info-bg {
        color: #349bfe;
    }

    .no-active span {
        color: #315585;
    }

    .active {
        background: #409efe !important;
        color: #feff02 !important;
        height: 50px;
        position: relative;
    }

    .active .info-bg {
        color: #feff02 !important;
    }

    .active span {
        margin-left: 4px;
        color: #ffffff;
    }

    .lteDay {
        background-color: #f9f9f9;
    }

    .info-bg {
        cursor: pointer;
        color: red;
        font-size: 18px;
        text-align: right;
    }

    .noJobNum {
        cursor: pointer;
        background-color: red;
        color: #fff;
        min-width: 20px;
        border-radius: 7px;
    }

    .calendar-month-top {
        color: #315585;
        background-color: #E7F2F7;
        height: 50px;
        font-size: 14px;
        line-height: 50px;
        border-bottom: 1px solid #fff;
    }
</style>
